<template>
  <div>
    <div class="search-group">
      <div class="search-gropu-item">
        <label>物资分类</label>
        <el-select v-model="listQuery.wuzizyid" placeholder="请选择">
          <el-option v-for="(item, index) in Wzzylist" :key="index" :label="item.zhuanyemc" :value="item.id"></el-option>
        </el-select>
      </div>
      <div class="search-gropu-item">
        <label>物资区分</label>
        <el-select v-model="listQuery.wuziqf" placeholder="请选择">
          <el-option v-for="(item, index) in $util.getWzqf()" :key="index" :label="item.name"
            :value="item.zhuanyeid"></el-option>
        </el-select>
      </div>

      <div class="search-gropu-item">
        <label>操作人</label>
        <el-input v-model="listQuery.caozuor" placeholder="请输入"></el-input>
      </div>
      <div class="search-gropu-item">
        <label>状态</label>
        <el-select v-model="listQuery.zhuangtai" placeholder="请选择">
          <el-option label="1" value="1">
          </el-option>
          <el-option label="2" value="2">
          </el-option>
          <el-option label="3" value="3">
          </el-option>
          <el-option label="4" value="4">
          </el-option>
          <el-option label="5" value="5">
          </el-option>
          <el-option label="6" value="6">
          </el-option>
          <el-option label="7" value="7">
          </el-option>

        </el-select>
      </div>

      <div class="search-gropu-item">
        <label>主管单位</label>
        <el-select v-model="listQuery.zgdw" placeholder="请选择">
          <el-option v-for="(item, index) in Zgdwlist" :key="index" :label="item.danweimc" :value="item.id"></el-option>
        </el-select>
      </div>

      <div class="search-gropu-item">
        <label>库房</label>
        <el-select v-model="listQuery.kufangid" placeholder="请选择">
          <el-option v-for="(item, index) in kflist.rows" :key="index" :label="item.mingcheng"
            :value="item.id"></el-option>
        </el-select>
      </div>

      <div class="search-gropu-item">
        <label>时间</label>
        <el-date-picker v-model.trim="listQuery.startTime" size="small" type="date" placeholder="请输入开始时间"
          value-format="yyyy-MM-dd" :editable="false" />
      </div>

      <div class="search-button">
        <el-button type="primary" icon="el-icon-search" @click="search">查询</el-button>
        <el-button icon="el-icon-refresh" @click="resetlist">重置</el-button>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  name: 'Test',
  data() {
    return {
      show: true, kflist: [],
      Wzzylist: [],
      cbdjList: [],
      Zgdwlist: []
    }
  },
  props: {
    listQuery: {
      type: Object,
      default: {},
      required: true,
    },
    path: {
      type: String,
      default: null,
      require: true,
    },
  },
  created() { },
  async mounted() {
    //物资分类
    this.Wzzylist = await this.$util.getWzzy()
    //等级
    this.cbdjList = await this.$util.getZBDJlist()
    this.Zgdwlist = await this.$util.getZgdw()
    this.kflist = await this.$util.getKf(this.$store.getters['user/cangkuid'])
  },
  methods: {
    search() {
      this.$parent.search()
    },
    resetlist() {
      this.$parent.resetlist()
    }
  },
}
</script>
<style lang="scss" scoped>
.search-group {
  display: flex;
  flex-flow: row wrap;

  .search-gropu-item {
    padding: 10px 20px;
    width: calc((100% - 20px * 8) / 4);
    display: flex;

    label {
      width: .8rem;
      white-space: nowrap;
      line-height: .32rem;
      margin-right: .1rem;
    }

    .el-select {
      width: 100%;
    }
  }

  .search-gropu-item-time {
    width: 500px !important;
    padding: 10px 20px;
    display: flex;

    label {
      white-space: nowrap;
      line-height: 32px;
      margin-right: 10px;
    }
  }

  .search-button {
    margin-left: auto;
    padding: .10rem .20rem;

    .el-button {
      font-size: .14rem !important;
    }
  }
}

::v-deep {
  .el-date-editor {
    width: 100% !important;
  }
}
</style>